<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Webservice Autocomplete</title>
<link rel="stylesheet" href="jquery-ui.css" />
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui-1.10.2.js"></script>
<script src="AutoLookup.js"></script>
 <style>
.ui-autocomplete-loading {
background: white url('ui-anim_basic_16x16.gif') right center no-repeat;
}
#city { width: 25em; }
</style>
<script>
    function checkPostal() {
        var parameters = '{"suburb":"' + document.getElementById('f002').value + '",'
        + '"city":"' + document.getElementById('f002').value + '",'
        + '"code":"' + document.getElementById('f004').value + '"'
        +'}';

        $.ajax({
            url: "/ACBServiceProxy.svc/PostalCheck",
            type: 'POST',
            async: false,
            dataType: 'json',
            contentType: 'application/json; charset="utf-8"',
            data: parameters,
            complete: function (response) {
                alert('complete: response ' + response + ' responseText ' + response.responseText);
                //var res = jQuery.parseJSON(response.responseText);
                //document.getElementById("errNumDesc").value = res.PostalCheckResult;
            },
            error: function (response) {
                alert('error ' + response.responseText);
            }
        });
        return true;
    }

</script>

</head>
<body>
<div class="ui-widget">
<label for="city">Title: </label> <input type="text" id="f001" value="" class="ui-autocomplete-input" /> <br /><br />

<label for="city">City: </label> <input type="text" id="f002" value="" class="ui-autocomplete-input" /> <br />
<label for="city">Suburb: </label> <input type="text" id="f003" value="" class="ui-autocomplete-input" /> <br />
<label for="city">Postal Code: </label> <input type="text" id="f004" value="" class="ui-autocomplete-input" /> <br />
<input type="button" value="PostalCheck" onclick="checkPostal();" /><br /><br />

<label for="city">Bank: </label> <input type="text" id="f005" value="" class="ui-autocomplete-input" /> <br />
<label for="city">Branch Name: </label> <input type="text" id="f006" value="" class="ui-autocomplete-input" /> <br />
<label for="city">Branch Code: </label> <input type="text" id="f007" value="" class="ui-autocomplete-input" /> <br />


</div>
</body>
</html>